<template>
  <div>
    <a-modal
      title="新增角色"
      :visible="dialogVisible"
      :confirm-loading="confirmLoading"
      width="600px"
      okText="确定"
      cancelText="取消"
      @cancel="handleCancel"
      :footer="false"
    >
      <a-form :form="form" :labelCol="{ span: 4 }" @submit="handleAdd">
        <a-row>
          <a-col :span="24">
            <input type="text" name="username" class="preventChrome" />
            <input type="password" name="password" class="preventChrome" />
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="24">
            <a-form-item label="用户名称">
              <a-input
                v-decorator="[
                  'username',
                  { rules: [{ required: true, message: '' }] },
                ]"
                style="width: 80%"
                autocomplete="off"
              >
              </a-input>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="24">
            <a-form-item label="用户密码">
              <a-input
                v-decorator="[
                  'password',
                  { rules: [{ required: true, message: '' }] },
                ]"
                type="password"
                style="width: 80%"
                autocomplete="off"
              >
              </a-input>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="24">
            <a-form-item label="权限角色">
              <a-select
                v-decorator="[
                  'role',
                  { rules: [{ required: true, message: '' }] },
                ]"
                mode="multiple"
                :options="roleOption"
                placeholder="选择角色"
                style="width: 80%"
              >
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="24">
            <a-form-item style="margin: 0 15px">
              <a-button type="primary" html-type="submit" block>确定</a-button>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-modal>
  </div>
</template>

<script>
import { addUser } from "@/api/system/user";
import { queryRoleList } from "@/api/system/role";

export default {
  name: "UserAddDialog",
  data() {
    return {
      dialogVisible: this.$store.getters.dialogAddVisible.user,
      confirmLoading: false,
      form: this.$form.createForm(this),
      roleOption: [],
    };
  },
  watch: {
    "$store.getters.dialogAddVisible.user": function (nv) {
      this.dialogVisible = nv;
      queryRoleList().then((res) => {
        this.roleOption = res.data.map((i) => {
          return {
            value: i.value,
            label: i.name,
          };
        });
        let idx = this.roleOption.findIndex((i) => i.value == 1);
        this.roleOption.splice(idx, 1);
      });
    },
  },
  methods: {
    handleAdd(e) {
      e.preventDefault();
      this.form.validateFieldsAndScroll((err, values) => {
        if (!err) {
          console.log(values);
          addUser(values).then((res) => {
            if (res.data.success) {
              this.$message.success("新增成功！");
              this.$emit("success");
              this.handleCancel();
            } else {
              this.$message.error("新增失败！");
              console.log(res.data.msg);
            }
          });
        }
      });
    },
    handleCancel() {
      this.form.resetFields();
      this.$store.dispatch("SetAddVisible", [false, "user"]);
    },
  },
};
</script>

<style lang="scss">
.preventChrome {
  position: absolute;
  top: -320px;
  width: 1px;
  opacity: 0;
}
</style>